<template>
  <el-card shadow="never" :body-style="{ padding: '0px' }">
    <template #header>
      <div class="flex_between">
        <span>最新动态</span>
        <span class="more">更多</span>
      </div>
    </template>

    <el-row>
      <el-col v-for="item in list" :key="item">
        <el-card shadow="never" style="margin-bottom: 0px; border-radius: 0px">
          <div class="card_header">
            <el-avatar :size="50" :src="item.avatarUrl"></el-avatar>
            <div class="card_item_desc">
              <span class="card_header_title">{{ item.name }}</span>
              <span class="card_desc">{{ item.desc }}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<script lang="ts">
import { defineComponent } from 'vue'

export default defineComponent({
  setup() {
    const list = [
      {
        name: '小狗钱钱',
        avatarUrl: 'https://cdn.eleadmin.com/20200609/c184eef391ae48dba87e3057e70238fb.jpg',
        desc: 'UI设计师、交互专家'
      },
      {
        name: '爱睡觉的猫',
        avatarUrl: 'https://cdn.eleadmin.com/20200609/b6a811873e704db49db994053a5019b2.jpg',
        desc: '前端工程师'
      },
      {
        name: '小红帽的书',
        avatarUrl: 'https://cdn.eleadmin.com/20200609/948344a2a77c47a7a7b332fe12ff749a.jpg',
        desc: '前端工程师'
      },
      {
        name: 'Jasmine',
        avatarUrl: 'https://cdn.eleadmin.com/20200609/f6bc05af944a4f738b54128717952107.jpg',
        desc: '产品经理、项目经理'
      },
      {
        name: '西门吹雪',
        avatarUrl: 'https://cdn.eleadmin.com/20200609/2d98970a51b34b6b859339c96b240dcd.jpg',
        desc: '组长、后端工程师'
      }
    ]

    return {
      list
    }
  }
})
</script>

<style lang="scss" scoped>
.flex_between {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .more {
    font-weight: normal;
    color: var(--el-color-primary);
    cursor: pointer;
  }
}

.card_header {
  display: flex;
  align-items: center;
}

.card_item_desc {
  display: flex;
  flex-direction: column;
  margin-left: 16px;

  .card_header_title {
    font-size: 18px;
    line-height: 28px;
  }

  .card_desc {
    font-size: 14px;
    color: #00000073;
  }
}
</style>
